<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>task_details</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/global.css">
		<link rel="stylesheet" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.picker.css">
		<link rel="stylesheet" href="../../../css/mui.poppicker.css">
		<style type="text/css">
			/* 请选择组件 */
			.task_bar {
				display: flex;
				justify-content: space-between;
				border: 1px solid #d8d8d8;
				border-radius: 35px;
			}

			.typeSel_div {
				width: 100%;
			}

			.mui-btn-block {
				font-size: 16px;
				display: block;
				width: 100%;
				margin-bottom: 0;
				padding: 0;
				border: 0;
			}

			/* 时间选择 */
			.selectDate {
				height: 25px;
			}
			
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
				
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			
			/* 提示弹出层 */
			.popover .title {
				padding: 0;
				color: #333;
				font-size: 16px;
				margin: 30px;
			}
			
			.btn_box {
				overflow: auto;
				margin: 30px 20px;
			}
			
			/* 新ui更新 */
			.task_tit{
				margin: 10px 15px 0;
			}
			.lck_bor_gz{
				width: 80px;
				border-bottom: 2px solid #ea1e1a;
			}
			.lck_bor_gzjh{
				width: 128px;
				border-bottom: 2px solid #ea1e1a;
			}
			.task_info{
				box-shadow: 0 0 0 0;
				border-radius:0;
			}
			.task_info .info {
			    padding: 0px 5px;
				height: auto;
			}
			.task_info .info p img{
				margin-right: 10px;
				height: 18px;
			}
			.task_info .info p.name{
				font-size: 15px;
			}
			.task_info .info p span{
				font-size: 15px;
				color: #333;
				float: left;
			}
			.xingImg{
				margin-right: 2px !important;
			}
			.task_bar .tsearch{
				border-left: 0;
				background: url("../../../images/icon_374.png") no-repeat center center;
				background-size: 18px;
			}
			.mui-btn-block{
				text-align: left;
			}
			.selectVisitedType{
				background: url(../../../images/icon_333.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.selectDateBegin{
				background: url(../../../images/icon_375.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.selectDateEnd{
				background: url(../../../images/icon_376.png) no-repeat left center;
				background-size: 18px;
				float: right;
				height: 50px;
				line-height: 25px;
				color: #8E8E93;
				padding-right: 0;
				text-align: right;
				border-bottom: 1px solid #d8d8d8;
			}
			.task_list{
				border-bottom: 0;
				box-shadow: 0px 0px 6px 4px #f1f1f1;
				border-radius: 10px;
				margin: 20px 5px 10px;
				padding: 1px 12px;
			}
			.task_list .name{
				border-bottom: 1px solid #ececec;
				font-size: 15px;
				height: 50px;
				line-height: 50px;
			}
			.task_statu li{
				height: 80px;
				margin: 5px;
				width: 22%;
				border: 1px solid #e3e3e3;
				border-radius: 5px;
			}
			.task_statu li img{
				height: 30px;
				width: auto !important;
			}
			.task_statu li:last-child{
				border-right: 1px solid #e3e3e3;
			}
			.task_statu li em{
				top: -50px;
			}
		</style>
	</head>

	<body>
		
		<div id="div"></div>
		<div id="popover" class="mui-popover shadow popover">
			<p class="title" id="title"></p>
			<div class="btn_box">
				<span class="fl" id="closepop">取消</span>
				<span class="fr red" id="quedingupdate">拨打</span>
			</div>
		</div>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">计划安排</h1>
		</header>
		<div class="mui-content">
			<div class="task_tit">基本信息</div>
			<div class="lck_bor_gz"></div>
			<div class="task_info">
				<div class="info" style="height: 100%;">
					<p class="name" style="width: 100%;border-top: 1px solid #ececec;height: 50px;line-height: 50px;">
						<img src="../../../images/icon_369.png" />
						<span id="name"  style="float: none"></span>
						&nbsp;|&nbsp;
						<span id="mobile" style="float: none"></span>
					</p>
					<p class="wid" style="width: 100%;border-top: 1px solid #ececec;height: 50px;line-height: 50px;">
						<img src="../../../images/icon_370.png" />
						<span>工作状态：</span>
						<span id="workday"></span>
						<span id="level" style="float: right;"></span>
					</p>
					<p style="width: 100%;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;height: auto;line-height: 50px;">
						<img src="../../../images/icon_371.png" />
						<span id="address" style="color: #2188b9;" onclick="fseRealTime()"></span>
					</p>
					<!-- <p class="map" id="realTime">地图<img style="height: 26px;margin-top: 10px;" src="../../../images/icon_31.png" /></p> -->
				</div>
			</div>
			<div class="task_tit">工作计划</div>
			<div class="lck_bor_gz"></div>
			<div class="task_info">
				<div class="task_bar">
					<div class="typeSel_div">
						<input type="hidden" id="type" name="" />
						<button id="typeSel" class="mui-btn mui-btn-block mui-btn-select" type="button">当前周</button>
					</div>
					<div class="tsearch" onclick="selectList()"></div>
				</div>
				<div class="task_bar" id="visitedPicker" style="height:auto;border: 0;padding: 0 5px;">
					<div style="display:inline-block;width: 100%;">
						<input type="hidden" id="visitedType" name="" />
						<button id="visitedTypeSel" type="button" class="selectVisitedType" style="width: 100%;">请选择拜访状态</button>
					</div>
				</div>
				<div class="task_bar" id="timePicker" style="display: none;height:auto;border: 0;padding: 0 5px;">
					<div style="display:inline-block;width: 100%;">
						<input type="hidden" id="startTimeVal" />
						<input type="hidden" id="endTimeVal" />
						<button id="startTime" type="button" class="selectDateBegin" style="width: 100%;">请选择开始时间</button>
						<button id="endTime" type="button" class="selectDateEnd" style="width: 100%;">请选择结束时间</button>
					</div>
				</div>
				<div id="taskList">
					<!-- 列表内容 -->
				</div>
			</div>
			<div class="task_tit">待处理服务通知</div>
			<div class="lck_bor_gzjh"></div>
			<div class="task_info">
				<ul class="task_statu">
					<li>
						<img src="../../../images/icon_380.png" style="width: 30px;margin: 12px auto 0;"/>
						<span>
							已接受 <em id="state1">0</em>
						</span>
					</li>
					<li>
						<img src="../../../images/icon_377.png" style="width: 30px;margin: 12px auto 0;"/>
						<span>
							已签到 <em id="state2">0</em>
						</span>
					</li>
					<li>
						<img src="../../../images/icon_378.png" style="width: 30px;margin: 12px auto 0;"/>
						<span>
							已签离 <em id="state3">0</em>
						</span>
					</li>
					<li>
						<img src="../../../images/icon_379.png" style="width: 30px;margin: 12px auto 0;"/>
						<span>
							已完成 <em id="state4">0</em>
						</span>
					</li>
				</ul>
			</div>
			<div class="btn_box">
				<span class="fl red one" id="cancelBtn">关闭</span>
			</div>
			<div style="height: 50px;"></div>
		</div>
		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/utils/rolldate.min.js"></script>
		<script src="../../../js/mui.picker.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script src="../../../js/fse/service/report/phone/phone.js"></script>

		<script type="text/javascript" charset="utf-8">
			var enginnerId;
			var serviceNoticeId;
			var serviceNo;
			var selfOrOther; //1或非空代表别人看，不可修改
			
			(function($, doc) {
				$.init();

				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					enginnerId = self.enginnerId;
					serviceNoticeId = self.serviceNoticeId;
					serviceNo = self.serviceNo;
					selfOrOther = self.selfOrOther;
					
					// 日期控件
					initDateTimeControls();
					// 查询工程师信息
					selectFseInfo();
					// 查询列表
					selectList();
					// 查询统计服务通知数
					selectCount();
					
					// 拨打电话
					h("#mobile").tap(function(){
						if (enginnerId != app.getUser().enginnerId) {
							var phone = h("#mobile").html();
							if(phone!=undefined && phone!=''){
								h("#title").html("是否拨打 " + phone + " ？");
								mui("#popover").popover('toggle', document.getElementById("div"));
							}
						}
					});
					
					h("#quedingupdate").tap(function(){
						mui("#popover").popover('toggle', document.getElementById("div"));
						var phone = h("#mobile").html();
						plus.device.dial(phone, false); 
					}) 
					
					h("#closepop").tap(function(){
						mui("#popover").popover('toggle', document.getElementById("div"));
					}) 
					
					// 拜访状态选择框监听
					h('#visitedTypeSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '',
							text: '全部'
						}, {
							value: '0',
							text: '未拜访'
						}, {
							value: '1',
							text: '已拜访'
						}]);
						userPicker.show(function(items) {
							h('#visitedTypeSel').html(items[0].text)
							h('#visitedType').val(items[0].value)
							userPicker.dispose()
						});
					});
					
					// 日期选择框监听
					h('#typeSel').tap(function() {
						document.activeElement.blur();
						app.hideSoftKeybord();
						var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '1',
							text: '当前周'
						}, {
							value: '2',
							text: '当前月'
						}, {
							value: '3',
							text: '自定义'
						}]);
						userPicker.show(function(items) {
							h('#typeSel').html(items[0].text)
							h('#type').val(items[0].value)
							if (items[0].value == "3") {
								h('#timePicker').show()
							} else {
								h('#timePicker').hide()
							}
							userPicker.dispose()
						});
					});
					h('#cancelBtn').tap(function() {
						$.back();
					})
					// h("#realTime").tap(function() {
					// 	app.jumpTo("/view/workArea/others/fseRealTime.html", "view/workArea/others/fseRealTime", {
					// 		"enginnerId": enginnerId
					// 	});
					// })
				});
			}(mui, document));

			/**
			 * 查询列表
			 */
			function selectList() {
				// 查询条件
				var type = h("#type").val();
				var isVisited = h("#visitedType").val();
				var startTime = h("#startTimeVal").val();
				var endTime = h("#endTimeVal").val();
				if (type == 3) {
					if (startTime == "") {
						app.toast("请选择开始时间");
						return false;
					}
					if (endTime == "") {
						app.toast("请选择结束时间");
						return false;
					}
					var startDate = stringYYYYMMDDHHMMToDate(startTime).getTime();
					var endDate = stringYYYYMMDDHHMMToDate(endTime).getTime();	
					if (startDate > endDate) {
						app.toast("开始时间不能大于结束时间");
						return false;
					}
				}
				// 查询参数
				var param = {
					"type": type,
					"isVisited": isVisited,
					"startTime": startTime,
					"endTime": endTime,
					"enginnerId": enginnerId,
					"limitNum": 5
				}
				// 查询post
				app.showWaiting('加载中...')
				ajaxPost(BASE_URL + "cc/planAndCase/workPlan", param, function(data) {
					// console.log(JSON.stringify(data))
					app.closeWaiting()
					if (data.code == 200) { //查询成功
						var html = "";
						var jumpTo = "app.jumpTo('editPlan.html','view/service/editPlan.html')";
						var arr = data.data;
						var total = parseInt(data.msg.slice(4));
						if (arr.length <= 0) {
							h("#taskList").html('<div class="nodata">—— 暂无数据 ——</div>');
						} else {
							for (var i = 0; i < arr.length; i++) {
								var start = "";
								var end = "";
								var date = "";
								var enddate = "";
								var startHm = "";
								var endHm = "";
								var estimated = arr[i].estimatedVisitingTime;
								var estimatedDT = arr[i].estimatedDepartureTime;
								if (estimated) {
									date = estimated.substring(0, estimated.indexOf(" ")).trim();
									enddate = estimatedDT.substring(0, estimatedDT.indexOf(" ")).trim();
									startHm = estimated.substring(estimated.indexOf(" "), estimated.length).trim();
									endHm = estimatedDT.substring(estimatedDT.indexOf(" "), estimatedDT.length).trim();
									start = new Date(date);
									end = new Date(enddate);
								}
								// var endHm = end.Format("HH:mm");
								var week = getWeekDate(start);
								var weekEnd = getWeekDate(end);
								var planStates = arr[i].planStates;
								var stateName = getBaifang(planStates);
								html += '<div class="task_list">';
								html += '<p class="name" style="height: auto;line-height: initial;padding: 14px 0;">' + arr[i].customerName + '</p>';
								html += '<p class="name" onclick="jumpToNext(\'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\')">服务单数量：<span style="color: #2188b9;font-weight: bold;">' + arr[i].countNum + '</span>单';
								if('未拜访'==stateName){
									html += '<span style="float:right;color:#ea1e1a;">'+ stateName +'</span>';
								}
								else{
									html += '<span style="float:right;color:green;">'+ stateName +'</span>';
								}
								html += '</p>';
								if (enginnerId == app.getUser().enginnerId) {
									html += '<p class="name" onclick="jumpToUpdate(\'' + arr[i].planStates + '\', \'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\', \'' + arr[i].estimatedVisitingTime + '\', \'' + arr[i].estimatedWorkingHours + '\', \'' + arr[i].estimatedDepartureTime + '\')">预计上门时间：<span style="float:right;color: #696969;">' + arr[i].estimatedVisitingTime + '&nbsp;&nbsp;&nbsp;' + week + '➫</span></p>';
									html += '<p class="name" style="border-bottom: 0;" onclick="jumpToUpdate(\'' + arr[i].planStates + '\', \'' + arr[i].planIds + '\', \'' + arr[i].customerName + '\', \'' + arr[i].estimatedVisitingTime + '\', \'' + arr[i].estimatedWorkingHours + '\', \'' + arr[i].estimatedDepartureTime + '\')">预计结束时间：<span style="float:right;color: #696969;">' + arr[i].estimatedDepartureTime + '&nbsp;&nbsp;&nbsp;' + weekEnd + '➫</span></p>';
								} else {	
									html += '<p class="name">预计上门时间：<span style="float:right;color: #696969;">' + arr[i].estimatedVisitingTime + '&nbsp;&nbsp;&nbsp;' + week + '</span></p>';
									html += '<p class="name" style="border-bottom: 0;">预计结束时间：<span style="float:right;color: #696969;">' + arr[i].estimatedDepartureTime + '&nbsp;&nbsp;&nbsp;' + weekEnd + '</span></p>';
								}	
								html += '</div>';
							}
							if (total > 5){
								html += '<div  onclick="morePage()" style="text-align: center;color: #0a0a8b;font-size: 14px;color: #696969;margin-top: 20px;">查看更多</div>';
							}
										
							h("#taskList").html(html);
						}
					} else { //查询失败
						h("#taskList").html('<div class="nodata">—— 暂无数据 ——</div>');
						app.toast(data.msg)
					}
				}, function(errorMsg) {
					app.closeWaiting()
					h("#taskList").html('<div class="nodata">—— 暂无数据 ——</div>');		
					app.toast("数据获取失败，请检查网络连接");
				});
			}
			
			//获取是否拜访
			function getBaifang(planStates) {
				var res = "未拜访";
				var arr = planStates.split(",");
				for (var i = 0; i < arr.length; i ++) {
					if (arr[i] >= 2) {
						res = "已拜访";
						break;
					}
				}
				return res;
			}
			
			//服务单状态
			function getStateName(planStates) {
				//0待接受，1已接受，2已签到，3已签离，4已完成,5自动签离，6已拒绝
				if (planStates == 0) {
					return "待接受";
				} else if (planStates == 1) {
					return "已接受";
				} else if (planStates == 2) {
					return "已签到";
				} else if (planStates == 3) {
					return "已签离";
				} else if (planStates == 4) {
					return "已完成";
				} else if (planStates == 5) {
					return "自动签离";
				} else if (planStates == 6) {
					return "已拒绝";
				} else {
					return "";
				}
			}

			/**
			 * 查询统计服务通知数
			 */
			function selectCount() {
				ajaxGet(BASE_URL + "cc/PlanDetails/getFseStateCounts", {
					"EnginnerId": enginnerId
				}, function(data) {
					// console.log(JSON.stringify(data))
					if (data.code == 200) { //查询成功
						if (data.data != null && data.data.length > 0) {
							var ql = 0;
							for (var i = 0; i < data.data.length; i++) {
								var state = data.data[i].state;
								var stateCount = data.data[i].stateCount;
								if (state == 1) {
									h("#state1").html(stateCount);
								} else if (state == 2) {
									h("#state2").html(stateCount);
								} else if (state == 3) {
									ql +=  Number(stateCount);
								} else if (state == 4) {
									h("#state4").html(stateCount);
								} else if (state == 5) {
									ql += Number(stateCount);
								}
							}
							h("#state3").html(ql);
						}
					} else { //查询失败

					}
				}, function(errorMsg) {
					console.log(JSON.stringify(errorMsg))
				});
			}

			/**
			 * 查询工程师信息
			 */
			function selectFseInfo() {
				ajaxGet(BASE_URL + "cc/user/getFseInformation", {
					"EnginnerId": enginnerId,
					"ServiceNoticeId": serviceNoticeId
				}, function(data) {
					// console.log(JSON.stringify(data))
					if (data.code == 200) { //查询成功
						if (data.data && data.data.length > 0) {
							var user = data.data[0];
							var name = emptyStr(user.name); //姓名
							var mobile = emptyStr(user.mobile); //电话
							var level = emptyStr(user.level.slice(6)); //技能等级
							var workday = emptyStr(user.workday); //休假状态
							var address = emptyStr(user.address); //详细地址
							var xingStr = "";
							for(var z=0;z<level;z++){
								xingStr += '<img src="../../../images/icon_372.png" class="xingImg"/>';
							}
							for(var i=0;i<8-level;i++){
								xingStr += '<img src="../../../images/icon_373.png" class="xingImg"/>';
							}
							h("#level").html(xingStr);
							h("#name").html(name);
							h("#mobile").html(mobile);
							// h("#address").html(address);
							if (workday == 3) {
								h("#workday").html('<span>休假...</span>');
								h("#address").html("");
								h("#address").attr("onclick","");
							} else {
								h("#workday").html('<span>工作中...</span>');
								h("#address").html(address);
							}
						}
					} else { //查询失败

					}
				}, function(errorMsg) {
					app.toast(errorMsg);
					// console.log(JSON.stringify(errorMsg))
				});
			}
			
			/**
			 * 初始化日期时间控件
			 */
			function initDateTimeControls() {
				// 开始时间
				new Rolldate({
					el: '#startTime',
					format: 'YYYY-MM-DD hh:mm',
					beginYear: 2015,
					endYear: 2050,
					trigger: 'click',
					lang: {
						title: '请选择开始日期',
					},
					confirm: function(date) {
						h("#startTimeVal").val(date);
					}
				})

				// 结束日期
				new Rolldate({
					el: '#endTime',
					format: 'YYYY-MM-DD hh:mm',
					beginYear: 2015,
					endYear: 2050,
					trigger: 'click',
					lang: {
						title: '请选择结束日期',
					},
					confirm: function(date) {
						h("#endTimeVal").val(date);
					}
				})
			}

			// 跳转下一页
			function jumpToNext(planIds, customerName) {
				app.jumpTo("/view/workArea/plan/planList.html", "view/workArea/plan/planList", {
					"planIds": planIds,
					"customerName": customerName,
					"enginnerId": enginnerId
				});
			}

			// 跳转修改页
			function jumpToUpdate(planStates, planIds, customerName, startTime, hour, endTime) {
				var statArr = planStates.split(",");
				for (var i = 0; i < statArr.length; i ++) {
					if (statArr[i] > 1) {
						app.toast("存在已签到数据，不可修改");
						return false;
					}
				}
				app.jumpTo("/view/workArea/plan/expectedDoor.html", "view/workArea/plan/expectedDoor", {
					"planIds": planIds,
					"customerName": customerName,
					"estimatedVisitingTime": startTime,
					"estimatedWorkingHours": hour,
					"estimatedDepartureTime": endTime,
					"enginnerId": enginnerId
				});
			}
			
			// 跳转更多页
			function morePage() {
				// 查询条件
				var type = h("#type").val();
				var isVisited = h("#visitedType").val();
				var startTime = h("#startTimeVal").val();
				var endTime = h("#endTimeVal").val();
				if (type == 3) {
					if (startTime == "") {
						app.toast("请选择开始时间");
						return false;
					}
					if (endTime == "") {
						app.toast("请选择结束时间");
						return false;
					}
					var startDate = stringYYYYMMDDHHMMToDate(startTime).getTime();
					var endDate = stringYYYYMMDDHHMMToDate(endTime).getTime();	
					if (startDate > endDate) {
						app.toast("开始时间不能大于结束时间");
						return false;
					}
				}
				app.jumpTo("/view/workArea/plan/workPlanMore.html", "view/workArea/plan/workPlanMore", {
					"type": type,
					"isVisited": isVisited,
					"startTime": startTime,
					"endTime": endTime,
					"enginnerId": enginnerId
				});
			}
			
			 // 跳转地图
			function fseRealTime(){
				app.jumpTo("/view/workArea/others/fseRealTime.html", "view/workArea/others/fseRealTime", {
					"enginnerId": enginnerId
				});
			}
		</script>
		<!-- js代码 end -->

	</body>

</html>